<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background-color: rgba(0,0,0,.85);
        }
        #typing-effect{
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div id="typing-effect"></div>
    </div>
</body>
<script>
    // 回复内容数组
    var replyList = [
        "Hello, how can I help you today?",
        "I'm a language model trained by OpenAI.",
        "I can answer your questions about various topics.",
        "Feel free to ask me anything!",
    ];
    var replyIndex = 0;
    // 打字机效果实现函数
    function typingEffect() {
         // 回复内容数组索引
        var typingInterval = setInterval(function () {
            // 获取回复内容字符串
            var replyText = replyList[replyIndex];
            // 截取字符串并更新到页面上
            document.getElementById("typing-effect").innerHTML = replyText.slice(0, typingIndex);
            // 增加字符串索引
            typingIndex++;
            // 判断是否字符串结束
            console.log('replay_length',replyText.length, 'typingIndex', typingIndex,'replyIndex',replyIndex)
            if (typingIndex > replyText.length) {
                // 清除打字机效果计时器
                clearInterval(typingInterval);
                // 重置字符串索引和回复内容数组索引
                typingIndex = 0;
                replyIndex = (replyIndex + 1) % replyList.length;
                console.log('replyIndex', replyIndex)
                // 2秒后重新开始打字机效果
                setTimeout(typingEffect, 2000);
            }
        }, 100); // 设置打字机效果速度
    }

    // 启动打字机效果
    var typingIndex = 0;
    typingEffect();
</script>

</html>